<template>
  <div>
    <h1>表单校验</h1>
    <form class="myForm">
      <label>
        用户：<input
          @blur="verfy"
          type="text"
          name="username"
          v-model="formdata.username.value"
        />
        <span>{{ formdata.username.msg }}</span>
      </label>
      <label>
        密码：<input
          @blur="verfy"
          type="password"
          name="password"
          v-model="formdata.password.value"
        />
        <span>{{ formdata.password.msg }}</span>
      </label>
      <label>
        确认密码：<input
          @blur="verfy"
          type="password"
          name="checkpass"
          v-model="formdata.checkpass.value"
        />
        <span>{{ formdata.checkpass.msg }}</span>
      </label>
      <!-- <section>
                性别：
                <label>
                    <input name="genden" type="radio">男
                    <input name="genden" type="radio">女
                </label>
            </section> -->
      <!-- <label>
                生日：<input type="date">
            </label> -->
      <!-- <label>
                年龄：<input type="number">
            </label> -->
      <label>
        证件：<input
          @blur="verfy"
          type="text"
          name="code"
          v-model="formdata.code.value"
        />
        <span>{{ formdata.code.msg }}</span>
      </label>
      <label>
        电话：<input
          @blur="verfy"
          type="tel"
          name="phone"
          v-model="formdata.phone.value"
        />
        <span>{{ formdata.phone.msg }}</span>
      </label>
      <label>
        邮箱：<input
          @blur="verfy"
          type="emil"
          name="email"
          v-model="formdata.email.value"
        />
        <span>{{ formdata.email.msg }}</span>
      </label>
      <!-- <label>
                城市：<select name="" id=""></select>
            </label> -->
      <section>
        <button type="button">提交</button>
        <button type="reset">重置</button>
      </section>
    </form>
  </div>
</template>

<script>
export default {
  name: "Index",
  methods: {
    verfy(event) {
      const key = event.target.name;
      const item = this.formdata[key];
      // 校验
      switch (key) {
        case "username":
          if (item.value.length <= item.max && item.value.length >= item.min) {
            // 符合的话，把type变成true，把msg清空
            item.type = true;
            item.msg = "√";
          } else {
            item.type = false;
            item.msg = `用户名长度在${item.min}-${item.max}`;
          }
          break;
        case "password":
          if (item.value.length <= item.max && item.value.length >= item.min) {
            item.type = true;
            item.msg = "√";
          } else {
            item.type = false;
            item.msg = `密码长度在${item.min}-${item.max}`;
          }
          break;
        case "checkpass":
          if (this.formdata.password.value !== item.value) {
            item.type = false;
            item.msg = `两次密码不一致`;
          } else {
            item.type = true;
            item.msg = "√";
          }
          break;
        default:
          if (item.reg.test(item.value)) {
            item.type = true;
            item.msg = "√";
          } else {
            item.type = false;
            var errs = {
              code: "身份证格式错误",
              email: "邮箱格式错误",
              phone: "手机号格式错误",
            };
            item.msg = errs[key];
          }
      }
    },
  },
  data() {
    return {
      formdata: {
        checkpass: {
          type: true,
          msg: "",
          value: "",
        },
        username: {
          type: true,
          msg: "",
          value: "",
          max: 20,
          min: 2,
          reg: /asdas/,
        },
        password: {
          type: true,
          msg: "",
          value: "",
          max: 20,
          min: 6,
          reg: /asdas/,
        },
        phone: {
          type: true,
          msg: "",
          value: "",
          reg: /^1[3|4|5|8][0-9]\d{4,8}$/,
        },
        email: {
          type: true,
          msg: "",
          value: "",
          reg: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,
        },
        code: {
          type: true,
          msg: "",
          value: "",
          reg: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.myForm {
  border: 2px dashed red;
  & > label {
    display: block;
    margin: 5px auto;
  }
  section {
    button {
      padding: 0 10px;
      margin: 0 10px;
    }
  }
}
</style>